
<template>
  <el-form ref="userForm" :model="userInfo" size="small" label-width="90px">
    <el-form-item label="头像" prop="head">
      <UploadAvatar :avatar="userInfo.head" @getAvaTar="getAvaTar" />
    </el-form-item>
    <el-form-item label="姓名" required prop="realName">
      <el-input v-model="userInfo.realName"></el-input>
    </el-form-item>
    <el-form-item label="账号" prop="account">
      <el-input v-model="userInfo.account" disabled></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="userInfo.email"></el-input>
    </el-form-item>
    <el-form-item label="手机" prop="mobile">
      <span class="mr-10">{{userInfo.mobile}}</span>
      <UpdateMobile :mobile="userInfo.mobile" :userId="userInfo.id" @getNewMobile="getNewMobile" />
      <!-- <el-button type="primary" plain @click="sendMsg(userInfo.mobile)">更改手机号</el-button> -->
      <!-- <el-input v-model="userInfo.mobile"></el-input> -->
    </el-form-item>
    <el-form-item label="密码">
      <el-button type="primary" plain @click="changeTab">设置密码</el-button>
    </el-form-item>
    <el-form-item label="性别" prop="sex">
      <el-radio-group v-model="userInfo.sex">
        <el-radio label="1">男</el-radio>
        <el-radio label="2">女</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="入职时间" prop="entryDate">
      <el-date-picker
        v-model="userInfo.entryDate"
        type="date"
        placeholder="请选择"
        value-format="timestamp"
      ></el-date-picker>
    </el-form-item>
    <el-form-item label="员工工号" prop="staffNo">
      <el-input v-model="userInfo.staffNo"></el-input>
    </el-form-item>
    <el-form-item label="用户角色">
      <el-select v-model="getRoles" multiple disabled>
        <el-option :label="item.roleName" :value="item.id" v-for="item in roles" :key="item.id"></el-option>
      </el-select>
    </el-form-item>
    <el-divider></el-divider>
    <el-form-item label="联系QQ" prop="qq">
      <el-input v-model="userInfo.qq"></el-input>
    </el-form-item>
    <el-form-item label="员工籍贯" prop="nativePlace">
      <el-input v-model="userInfo.nativePlace"></el-input>
    </el-form-item>
    <el-form-item label="员工生日" prop="birthday">
      <el-date-picker
        v-model="userInfo.birthday"
        type="date"
        placeholder="请选择"
        value-format="timestamp"
      ></el-date-picker>
    </el-form-item>
    <el-form-item label="家庭地址" prop="address">
      <el-input v-model="userInfo.address"></el-input>
    </el-form-item>
    <el-form-item label="第二联系人" prop="secContactor">
      <el-input v-model="userInfo.secContactor"></el-input>
    </el-form-item>
    <el-form-item label="联系人关系" prop="secRelation">
      <el-input v-model="userInfo.secRelation"></el-input>
    </el-form-item>
    <el-form-item label="联系电话" prop="secPhone">
      <el-input v-model="userInfo.secPhone"></el-input>
    </el-form-item>
    <el-divider></el-divider>
    <div class="tr">
      <el-button @click="resetForm('userForm')">取消</el-button>
      <el-button type="primary" :loading="submiting" @click="onSubmit('userForm')">保存</el-button>
    </div>
  </el-form>
</template>
<script>
import { mapGetters } from "vuex";
import UploadAvatar from "./UploadAvatar";
import UpdateMobile from "./UpdateMobile";
import { rolesAllList } from "api/seting/role";
import { userUpdate } from "api/user";
export default {
  components: {
    UploadAvatar,
    UpdateMobile
  },
  data() {
    return {
      roles: [],
      submiting: false
    };
  },
  computed: {
    ...mapGetters(["userInfo", "userRoles"]),
    getRoles() {
      return this.userRoles.map(o => o.roleId);
    }
  },
  created() {
    this.loadRoles();
  },
  methods: {
    loadRoles() {
      rolesAllList({ params: {} }).then(res => {
        this.roles = res.data;
      });
    },
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.submiting) return;
          this.submiting = true;
          userUpdate(this.userInfo)
            .then(res => {
              this.submiting = false;
              this.$store.commit("SET_USER_INFO", res.data.user);
              this.$message.success("信息修改成功！");
            })
            .catch(err => {
              this.$message.error(err.msg);
            });
        } else {
          console.log("error submit");
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    changeTab() {
      this.$emit("changeTab", "second");
    },
    getAvaTar(avatarId) {
      this.userInfo.head = avatarId;
    },
    getNewMobile(mobile) {
      this.userInfo.mobile = mobile;
      this.$store.commit(
        "SET_USER_INFO",
        Object.assign(this.userInfo, {
          mobile
        })
      );
    }
  }
};
</script>
